<template>
  <div :class="isCollapse ? width : ''">
    <div @click="changeCollapse" class="toggle-button">|||</div>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      background-color="#333744"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <!-- 递归组件 -->
      <el-submenu v-for="(item, index) in menus" :key="item.id" :index="(index + 1) + ''">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">
            {{ item.authName }}
          </span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="(items, indexs) in item.children"
                       :key="items.id"
                        :index="(index + 1) + '-' + (indexs + 1)">
            <router-link class="sapn" tag="span" :to="'/home/' + items.path">
              {{ items.authName }}
            </router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getMenus } from "../api/user";
export default {
  data() {
    return {
      isCollapse: false,
      width: "width",
      menus: [],
    };
  },
  methods: {
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.$emit("sendWidth", 65);
      } else {
        this.$emit("sendWidth", 201);
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  async created() {
    let res = await getMenus();
    this.menus = res;
  },
  watch: {
    // 监听路由发生改变   vuex中的数据
    // "$route.path": {
    //   handler() {
    //     console.log('路由发生改变了')
    //   }
    // }
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
}

.width {
  width: 64px !important;
  /* -webkit-transform: translate(-50%, -50%) .5s; */
}

.sapn {
  display: inline-block;
  width: 100%;
  height: 100%;
}
</style>